<template>
  <div>
    <!-- 提示消息 -->
    <div class="msgTitle">
      <el-alert type="info" show-icon>数据一共{{ list.length }}条</el-alert>
    </div>
    <!-- 提示消息 -->
    <!-- 表格信息 -->
    <el-table style="width: 100%" height="400px" :data="list">
      <el-table-column prop="number" label="试题编号" width="180" />
      <el-table-column prop="subject" label="学科" width="120" />
      <el-table-column prop="catalog" label="目录" width="120">
        <!-- 格式化题型 -->
      </el-table-column>
      <el-table-column label="题型" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.questionType == '1' ? '单选' : '' || scope.row.questionType == '2' ? '多选' : '' || scope.row.questionType == '3' ? '简答' : '' }}</span>
        </template>
      </el-table-column>
      <!-- 格式化题型 -->
      <el-table-column prop="question" label="题干" width="200">
        <template slot-scope="scope">
          <span v-html="scope.row.question" />
        </template>
      </el-table-column>
      <!-- 录入时间格式化 -->
      <el-table-column label="录入时间" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.addDate | parseTimeByString('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <!-- 录入时间格式化 -->
      <!-- 格式化难度 -->
      <el-table-column prop="difficulty" label="难度" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.difficulty == 1">简单</span>
          <span v-else-if="scope.row.difficulty == 2">一般</span>
          <span v-else>困难</span>
        </template>
      </el-table-column>
      <!-- 格式化难度 -->
      <el-table-column prop="creator" label="录入人" width="120" />
      <!-- 审核状态 -->
      <el-table-column prop="chkState" label="审核状态" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.chkState == 1">待审核</span>
          <span v-else-if="scope.row.chkState == 2">通过</span>
          <span v-else>拒绝</span>
        </template>
      </el-table-column>
      <!-- 审核状态 -->
      <el-table-column prop="chkRemarks" label="审核意见" width="120" />
      <el-table-column prop="chkUser" label="审核人" width="120" />
      <!-- 发布状态 -->
      <el-table-column prop="publishState" label="发布状态" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.publishState == 1">待发布</span>
          <span v-else-if="scope.row.publishState == 2">已发布</span>
          <span v-else>已下架</span>
        </template>
      </el-table-column>
      <!-- 发布状态 -->
      <el-table-column fixed="right" label="操作" width="240">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleClick(scope.row)">预览</el-button>
          <el-button type="text" size="small" :disabled="scope.row.chkState !== 1" true:false @click="shenhe(scope.row)">审核</el-button>
          <el-button type="text" size="small" :disabled="scope.row.publishState == 1" true:false @click="edit(scope.row.id)">修改</el-button>
          <el-button type="text" size="small" @click="upHandleClick(scope.row)" v-html="scope.row.publishState == 1 ? '下架' : '上架'" />
          <el-button type="text" size="small" :disabled="scope.row.publishState == 1" true:false @click="deleteRow(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格信息 -->
    <!-- 预览弹框 -->
    <el-dialog title="题目预览" :visible.sync="dialogPreview" left width="60%" :before-close="handleClose">
      <el-row type="flex" justify="space-between">
        <el-col>
          【题型】:
          <span v-if="questionType == 1">单选</span>
          <span v-else-if="questionType == 2">多选</span>
          <span v-else>简答</span>
        </el-col>
        <el-col>【编号】:{{ id }}</el-col>
        <el-col>【难度】:{{ difficulty }}</el-col>
        <el-col>【标签】:{{ tags }}</el-col>
      </el-row>
      <el-row type="flex" justify="start">
        <el-col>【学科】:{{ subject }}</el-col>
        <el-col>【目录】:{{ catalog }}</el-col>
        <el-col>【方向】:{{ direction }}</el-col>
        <el-col />
      </el-row>
      <hr />
      <el-row>
        【题干】：
        <el-col v-html="question" />
      </el-row>
      <el-row>
        <el-col v-if="questionType == 1">
          <el-row>单选 选项: (以下选中的选项为正确答案)</el-row>
          <el-row>
            <el-radio-group v-model="isRight">
              <div v-for="item in options" :key="item.id">
                <el-radio :label="item.isRight">{{ item.title }}</el-radio>
              </div>
            </el-radio-group>
          </el-row>
        </el-col>
        <el-col v-else-if="questionType == 2">
          多选 选项: (以下选中的选项为正确答案)
          <el-checkbox-group v-model="checkList">
            <div v-for="item in options" :key="item.id">
              <el-checkbox :label="item.title" />
            </div>
          </el-checkbox-group>
        </el-col>
        <el-col v-else />
      </el-row>
      <el-row />
      <hr />
      <el-row>
        【参考答案】:
        <el-button type="danger" autoplay="autoplay" @click="videoAnwserPreview">视频答案预览</el-button>
      </el-row>
      <el-row class="videoShow">
        <video v-show="showVideoAnwser" :src="videoURL" width="400" height="300" controls="controls" muted autoplay />
      </el-row>
      <hr />
      <el-row type="flex" justify="start">
        <span>【参考解析】:</span>
        <span v-html="answer" />
      </el-row>
      <hr />
      <el-row>【题目备注】:{{ remarks }}</el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="close">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 预览弹框 -->
    <!-- 下架弹框 -->
    <el-dialog title="提示" :visible.sync="dialogPublishVisible" width="30%" center>
      <span>
        <i class="el-icon-warning" type="warning" />
        你确认{{ this.rowData.publishState == 1 ? '下架' : '上架' }}这道题目吗?
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogPublishVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 下架弹框 -->
    <!-- 审核弹框 -->
    <el-dialog v-bind="$attrs" title="题目审核" :visible.sync="dialogShenHe" v-on="$listeners" @close="onClose">
      <el-form ref="formRef" :model="formData" :rules="rules" size="medium" label-width="100px" label-position="left">
        <el-form-item label-width="0" prop="shenheState">
          <el-radio-group v-model="formData.shenheState" size="medium">
            <el-radio v-for="(item, index) in shenheStateOptions" :key="index" :label="item.value" :disabled="item.disabled">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label-width="0" prop="textarea">
          <el-input v-model="formData.textarea" type="textarea" placeholder="请输入" :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogShenHe = false">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
    <!-- 审核弹框 -->
    <!-- 删除弹框 -->
    <el-dialog title="提示" :visible.sync="dialogdelVisible" width="30%" center>
      <span>
        <i class="el-icon-warning" type="warning" />
        此操作将永久删除该题目,是否继续?
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogdelVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureDel">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 删除弹框 -->
    <!-- 分页 -->
    <el-pagination
      :current-page="Number(pageShows.page)"
      :page-sizes="[3, 10, 20, 50]"
      :page-size="Number(pageShows.pagesize)"
      layout=" prev, pager, next,sizes, jumper"
      :total="Number(total)"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 分页 -->
  </div>
</template>

<script>
import { choice, detail, choicePublish, choiceAdd, choiceCheck } from '@/api/hmmm/questions'
export default {
  name: 'QuestionCheck',
  props: {
    list: {
      required: true
    },
    disabled: {
      type: Number
    }
  },

  data() {
    return {
      dataList: [], // 精选列表详情
      pageShows: {
        page: 1,
        pagesize: 10
      },
      listLoading: true,
      total: '', // 获取总条数
      dialogPreview: false, // 控制预览弹框
      // 预览弹框数据
      questionType: '', // 题型
      id: '', // 试题编号
      difficulty: '', // 试题难度
      tags: '', // 标签
      subject: '', // 学科
      catalog: '', // 目录
      direction: '', // 方向
      question: '', // 题干
      answer: '', // 参考答案
      remarks: '', // 题目备注
      videoURL: undefined, // 视频地址
      showVideoAnwser: false, // 控制显示视频答案
      options: [], // 单选/多选选项
      isRight: 1, // 选择题答案
      radio: '', // 单选绑定
      checkList: [], // 多选绑定
      dialogPublishVisible: false, // 下架弹框
      rowData: '', // 当前行数据
      dialogShenHe: false, // 控制审核弹框
      textarea: '', // 审核弹框的意见
      dialogdelVisible: false, // 控制删除弹框
      delRow: '', // 当前删除行的数据
      shenheData: '', // 改行被审核的数据
      shenheState: '', // 绑定审核的状态 通过/不通过
      formData: {
        shenheState: 2,
        textarea: undefined
      },
      rules: {
        shenheState: [
          {
            required: true,
            message: '不能为空',
            trigger: 'change'
          }
        ],
        textarea: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          }
        ]
      },
      shenheStateOptions: [
        {
          label: '通过',
          value: 1
        },
        {
          label: '拒绝',
          value: 2
        }
      ]
    }
  },
  computed: {},
  created() {
    this.getDataList()
  },
  methods: {
    // 审核弹框
    // 审核弹框右上角关闭
    onClose() {
      this.$refs.formRef.resetFields()
    },

    // 点击确定按钮
    handelConfirm() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return
        // 选择通过
        if (this.formData.shenheState === 1) {
          // 选择拒绝
          await choiceCheck({ id: this.shenheData.id, chkState: 1, chkRemarks: this.formData.textarea })
          this.shenheData.chkState = 2
          this.chkRemarks = this.formData.textarea
        } else {
          await choiceCheck({ id: this.shenheData.id, chkState: 2, chkRemarks: this.formData.textarea })
          this.shenheData.chkState = 3
          this.chkRemarks = this.formData.textarea
        }
        // 关闭弹框
        this.dialogShenHe = false
        this.$message.success('操作成功')
        this.$emit('update')
      })
    },
    // 审核弹框
    // 点击"预览"按钮
    async handleClick(row) {
      await this.getDetailList(row)
      this.options.forEach(e => {
        if (e.isRight === 1) {
          this.checkList.push(e.title)
        }
      })
      this.questionType = row.questionType
      this.id = row.id
      this.difficulty = row.difficulty
      this.tags = row.tags
      this.subject = row.subject
      this.catalog = row.catalog
      this.direction = row.direction
      this.question = row.question
      this.answer = row.answer
      this.remarks = row.remarks
      this.videoURL = row.videoURL
      this.dialogPreview = true
    },
    handleClose() {
      // 关闭弹框
      this.dialogPreview = false
      // 关闭视频答案
      this.showVideoAnwser = false
    },
    // 展示视频答案
    videoAnwserPreview() {
      this.showVideoAnwser = true
    },
    // 点击预览弹框关闭按钮
    close() {
      // 关闭弹框
      this.dialogPreview = false
      // 关闭视频答案
      this.showVideoAnwser = false
    },
    // 获取基础题库详情---选项详情
    async getDetailList(data) {
      const detailList = await detail(data)
      this.options = detailList.data.options
    },
    // 获取精选列表详情
    async getDataList() {
      this.listLoading = true
      const { data } = await choice(this.pageShows)
      this.dataList = data
      this.total = data.counts
      console.log(this.total)
      this.listLoading = false
    },
    // 点击上架按钮==弹出修改上下架对话框
    upHandleClick(val) {
      // 拿到当前行数据
      this.rowData = val
      // 打开对话框
      this.dialogPublishVisible = true
    },
    // 点击确认下架/或上架
    async sure() {
      if (this.rowData.publishState === 1) {
        // 上架
        await choicePublish({ id: this.rowData.id, publishState: 1 })
        this.rowData.publishState = 0
      } else {
        // 下架
        await choicePublish({ id: this.rowData.id, publishState: 0 })
        this.rowData.publishState = 1
      }
      //  关闭下架弹框
      this.dialogPublishVisible = false
    },
    //  点击审核
    shenhe(val) {
      // // 拿到审核的改行数据
      this.shenheData = val
      // 弹出审核弹框
      this.dialogShenHe = true
    },
    edit(id) {
      console.log(id)
      this.$router.push({ name: 'questions-new', query: { id: id } })
    },
    // 点击删除按钮
    deleteRow(val) {
      // 弹出删除框
      this.dialogdelVisible = true
      // 拿到当前行数据
      this.delRow = val
    },
    // 点击确认按钮==>删除当前行数据
    async sureDel() {
      console.log(1)
      await choiceAdd({ id: this.delRow.id, choiceState: 0 })
      // 关闭弹框
      this.dialogdelVisible = false
      this.$message.success('操作成功')
      this.$emit('update')
    },

    // 分页
    // 每页显示信息条数 参数==>每页条数
    async handleSizeChange(val) {
      this.pageShows.pagesize = val
      if (this.pageShows.page === 1) {
        const { data } = await choice(this.pageShows)
        this.$emit('update', data.items)
      }
    },
    // 进入某一页 参数==>当前页
    async handleCurrentChange(val) {
      this.pageShows.page = val
      const { data } = await choice(this.pageShows)
      this.$emit('update', data.items)
    }
    // 分页
  }
}
</script>
<style scoped lang='less'>
.msgTitle {
  margin-bottom: 15px;
}

.el-dialog__footer {
  text-align: right;
}
.el-icon-warning:before {
  color: orange;
  margin-right: 8px;
}

/deep/.el-textarea__inner {
  margin-top: 20px;
}

.el-pagination {
  text-align: right;
}
/deep/.el-checkbox__label {
  margin: 4px 0;
}
</style>
